<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>号码规则</title>
<link href="../../../css/bg/styles/layout.css" th:href="@{/css/bg/styles/layout.css}" rel="stylesheet" type="text/css" />
<link href="../../../css/bg/styles/wysiwyg.css" th:href="@{/css/bg/styles/wysiwyg.css}" rel="stylesheet" type="text/css" />
<!-- Theme Start -->
<link href="../../../css/bg/themes/blue/styles.css" th:href="@{/css/bg/themes/blue/styles.css}" rel="stylesheet" type="text/css" />
<!-- Theme End -->
</head>
<body id="homepage">
	<div id="header">
    	<a href="" title=""><img src="../../../css/bg/img/cp_logo.png" th:src="@{/css/bg/img/cp_logo.png}" alt="Control Panel" class="logo" /></a>
    	<div id="searcharea">
            
        </div>
    </div>
        
    <!-- Top Breadcrumb Start -->
    <div id="breadcrumb">
    	<ul>	
        	<li><img src="../../../css/bg/img/icons/icon_breadcrumb.png" th:src="@{/css/bg/img/icons/icon_breadcrumb.png}" alt="当前位置" /></li>
        	<li><strong>当前位置:</strong></li>
            <li><a href="#" title="">号码规则</a></li>
            <li>/</li>
            <li class="current">规则列表</li>
        </ul>
    </div>
    <!-- Top Breadcrumb End -->
     
    <!-- Right Side/Main Content Start -->
    <div id="rightside">
    	<div id="prompt_box" style="display: none;">
    	<div class="contentcontainer">
            <div class="headings">
                <h2 id="prompt_box_head">删除<span></span>?</h2>
            </div>
            <div class="contentbox" style="text-align: center;">
            	<input type="button" class="btn" value="确定" id="prompt_box_ok" />
            	
            	<input type="button" class="btnalt" value="取消" id="prompt_box_cancel" />
            </div>
        </div>
    </div>
    <div id="edit_box" style="display: none;">
    	<div class="contentcontainer">
            <div class="headings">
                <h2 id="edit_box_head">4000AAAAAA</h2>
            </div>
            <div class="contentbox">
            	<p>
                    <label for="textfield"><strong>价格(元/年):</strong></label>
                    <input type="text" id="edit_box_price" class="inputbox" /> <br />
                    <span class="smltxt"></span>
                </p>
                <p>
                    <label for="textfield"><strong>别名:</strong></label>
                    <input type="text" id="edit_box_alias" class="inputbox" /> <br />
                    <span class="smltxt"></span>
                </p>
                <p>
                    <label for="textfield"><strong>备注:</strong></label>
                    <textarea id="edit_box_comment" style="height:150px;" class="inputbox"></textarea> <br />
                    <span class="smltxt"></span>
                </p>
                <div class="status success" style="display: none;">
		        	<p class="closestatus"><a href="" title="Close">x</a></p>
		        	<p><img src="../../../css/bg/img/icons/icon_success.png" th:src="@{/css/bg/img/icons/icon_success.png}" alt="Success" />保存成功!<span id="success_msg"></span></p>
		        </div>
		        <div class="status error" style="display: none;">
		        	<p class="closestatus"><a href="" title="Close">x</a></p>
		        	<p><img src="../../../css/bg/img/icons/icon_error.png" th:src="@{/css/bg/img/icons/icon_error.png}" alt="Error" />保存失败!<span id="error_msg"></span></p>
		        </div>
                <br />
                <input type="button" class="btn" id="edit_box_ok" value="确定" />
                <input type="button" class="btnalt" id="edit_box_cancel" value="取消" />
            </div>
       	</div>
    </div>
         <div class="contentcontainer">
            <div class="headings">
                <h2>号码规则列表</h2>
            </div>
            <div class="contentbox">
            	<br />
            	
            	<form action="" th:action="@{/rules}" method="get">
            		<p>
	            		<span>号码类型：</span><input class="inputbox" type="text" name="rule_fuzzy" style="width:120px;" th:value="${condition.rule_fuzzy}" />
	            		<span>&nbsp;&nbsp;&nbsp;&nbsp;价格：</span>
	            		<input class="inputbox" type="text" name="price_min" style="width:50px;text-align: right;" th:value="${condition.price_min == 0 ? '' : condition.price_min}" />
	            		<strong>—&nbsp;</strong><input class="inputbox" type="text" name="price_max" style="width:50px;text-align: right;" th:value="${condition.price_max == 0 ? '' : condition.price_max}" />
	            		<span>&nbsp;&nbsp;&nbsp;&nbsp;排序：</span>
	            		<select name="orderColumn">
	            			<option value="rule" th:selected="${condition.orderColumn == 'rule'}">号码类型</option>
	            			<option value="price" th:selected="${condition.orderColumn == 'price'}">价格</option>
	            		</select>
	            		<select name="order">
	            			<option value="asc" th:selected="${condition.order == 'asc'}">递增</option>
	            			<option value="desc" th:selected="${condition.order == 'desc'}">递减</option>
	            		</select>
	            		<input type="button" id="condition_query" class="btn" value="查询" />
            		</p>
            	</form>
            	
	            <table width="100%">
                	<thead>
                    	<tr>
                        	<th>序号</th>
                            <th>
                            		号码类型<img th:if="${condition.orderColumn == 'rule'}" src="../../../css/bg/img/icons/sort_desc.png" th:src="@{'/css/bg/img/icons/sort_'+${condition.order == 'asc' ? 'desc' : 'asc'}+'.png'}" alt="Edit" />
                            </th>
                            <th>
                            		价格(元/年)<img th:if="${condition.orderColumn == 'price'}" src="../../../css/bg/img/icons/sort_asc.png" th:src="@{'/css/bg/img/icons/sort_'+${condition.order == 'asc' ? 'desc' : 'asc'}+'.png'}" alt="Edit" />
                            </th>
                            <th>别名</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    	<tr th:remove="all">
                        	<td>1</td>
                            <td>4000AAAAAA</td>
                            <td>30000</td>
                            <td>4000AAAAAA</td>
                            <td>非常好的号码</td>
                            <td>
	                            <a href="#" title=""><img src="../../../css/bg/img/icons/icon_edit.png" th:src="@{/css/bg/img/icons/icon_edit.png}" alt="Edit" /></a>
	                            <a href="#" title=""><img src="../../../css/bg/img/icons/icon_unapprove.png" th:src="@{/css/bg/img/icons/icon_unapprove.png}" alt="Unapprove" /></a>
                            </td>
                        </tr>
                       	<tr th:each="rule,ruleStat : ${rules}" th:class="${ruleStat.odd}? 'alt'" class="alt" th:id="${'num_type_' + (ruleStat.index+1)}">
                        	<td th:text="${ruleStat.index+1}">2</td>
                            <td th:text="${rule.rule}">4000AAAA**</td>
                            <td th:text="${rule.price}">20000</td>
                            <td th:text="${rule.alias}">4000AAAA**</td>
                            <td th:text="${rule.comment}">非常好的号码2</td>
                            <td>
	                             <a href="#" title=""><img src="../../../css/bg/img/icons/icon_edit.png" th:src="@{/css/bg/img/icons/icon_edit.png}" alt="Edit" /></a>
	                            <a href="#" title=""><img src="../../../css/bg/img/icons/icon_unapprove.png" th:src="@{/css/bg/img/icons/icon_unapprove.png}" alt="Unapprove" /></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            	
            </div>
            <div>
            	
            </div>
        </div>
        
         
        <!-- Content Box End -->
        <div id="footer">
        	
        </div> 
        
    </div>
    <!-- Right Side/Main Content End -->
    
        <!-- Left Dark Bar Start -->
    <div id="leftside">
    	<div class="user">
            <p>&nbsp;</p>
        </div>
        
        <ul id="nav" th:include="bg/lefttree :: nav_tree">
        	<li>
        		<a class="expanded heading">配置</a>
                <ul class="navigation">
                    <li><a href="config.html" th:href="@{/config}" title="">系统参数配置</a></li>
                </ul>
            </li>
            <li>
            	<a class="expanded heading">号码信息查询</a>
                <ul class="navigation">
                    <li><a href="querysingle.html" th:href="@{/query/single}" title="">单条查询</a></li>
                    <li><a href="querymulti.html" th:href="@{/query/multi}" title="">多条查询</a></li>
                </ul>
            </li>
            <li>
            	<a class="expanded heading">号码规则</a>
                <ul class="navigation">
                	<!-- li class="heading selected">号码规则</li-->
                    <li><a href="rules.html" th:href="@{/query/single}" title="">规则列表</a></li>
                    <li><a href="addRule.html" th:href="@{/query/single}" title="">添加规则</a></li>
                    <li><a href="matchRule.html" th:href="@{/rule/match}" title="">匹配规则</a></li>
                </ul>
            </li>         
        </ul>
    </div>
    <!-- Left Dark Bar End --> 
    

    <script type='text/javascript' src='../../../js/libs/jquery-1.7.1.min.js' th:src="@{/js/libs/jquery-1.7.1.min.js}"></script>
    <script type='text/javascript' src='../../../js/bg/jquery.bpopup-0.6.0.min.js' th:src="@{/js/bg/jquery.bpopup-0.6.0.min.js}"></script>
    <script type="text/javascript" src='../../../js/bg/functions.js' th:src="@{/js/bg/functions.js}"></script>
    <!--[if IE 6]>
    <script type='text/javascript' src='scripts/png_fix.js'></script>
    <script type='text/javascript'>
      DD_belatedPNG.fix('img, .notifycount, .selected');
    </script>
    <![endif]--> 
    <script type="text/javascript" th:inline="javascript">
    	
      var edit_url = /*[[@{/rule}]]*/'';
      
      $('img[alt="Unapprove"]').click(function(e){
    	  
    	  e.preventDefault();
    	  
    	  var num_type = $(this).parents('td:first').prev('td').prev('td').prev('td').prev('td');
    	  $('#prompt_box_head > span').text($(num_type).text());
    	  $("#prompt_box").bPopup();
	  });
      
      $('#prompt_box_ok').click(function(e){
    	  e.preventDefault();
    	  
    	  var num_type = $('#prompt_box_head > span').text()
    	  $.ajax({
				url:edit_url+'/'+num_type,
				type:'GET',
				success:function(data, textStatus, jqXHR){
					var resultObj = $.parseJSON(data);
					if(resultObj.success){
						$('td').each(function(){
							if($(this).text() == $('#prompt_box_head > span').text()){
								$(this).parents('tr:first').fadeOut(300);
								$(this).parents('tr:first').nextAll('tr').each(function(){
									var indexNum = $(this).children('td:first').text();
									$(this).children('td:first').text(parseInt(indexNum)-1);
								});
							}
						});
					}else{
						
					}
					$("#prompt_box").bPopup().close();
				},
				error:function(jqXHR, textStatus, errorThrown){
					$('.status.error').show();
				}
			});
      });
      
	  $('#prompt_box_cancel').click(function(e){
		  e.preventDefault();
		  
		  $("#prompt_box").bPopup().close();
      });
  
  	  $('img[alt="Edit"]').click(function(e){
  		 e.preventDefault();
  		 
  		  	var parent_td = $(this).parents('td:first');
  		  	
  		  	var num_comment = $(parent_td).prev('td');
  		  	
  		    var num_alias = $(num_comment).prev('td');
  		  	
  		  	var num_price = $(num_alias).prev('td');
  		  	
  		  	var num_type = $(num_price).prev('td');
  		  	
  		  	$('#edit_box_comment').text($(num_comment).text());
  		    $('#edit_box_alias').val($(num_alias).text());
  		  	$('#edit_box_price').val($(num_price).text());
  		  	$('#edit_box_head').text($(num_type).text());
  		  	
  			$("#edit_box").bPopup();
  			
  			
  	  });
  	  
  	  $('#edit_box_cancel').click(function(e){
  		 e.preventDefault();
  		 
  			$("#edit_box").bPopup().close();
  	  });
  	  
  	  $('#edit_box_ok').click(function(e){
  		 e.preventDefault();
  		 
  		    var num_type = $('#edit_box_head').text();
			var num_price = $('#edit_box_price').val();
			var num_comment = $('#edit_box_comment').val();
			var num_alias = $('#edit_box_alias').val();
			
			if(!$.isNumeric(num_price)){
				$('#edit_box_price').addClass('errorbox');
				$('#edit_box_price').nextAll('.smltxt').text('价格输入不正确');
				return;
			}else{
				$('#edit_box_price').removeClass('errorbox');
				$('#edit_box_price').nextAll('.smltxt').text('');
			}
			
			$.ajax({
				url:edit_url+'/update',
				data: { rule: num_type, price: num_price, comment: num_comment, alias: num_alias },
				type:'POST',
				success:function(data, textStatus, jqXHR){
					var resultObj = $.parseJSON(data);
					if(resultObj.success){
						$('.status.success').show();
						location.reload();
					}else{
						$('.status.error').show();
					}
				},
				error:function(jqXHR, textStatus, errorThrown){
					$('.status.error').show();
				}
			});
	  });
  	  
  	  $('#condition_query').click(function(e){
  		 e.preventDefault();
  		  var price_min = $('input[name="price_min"]').first().val();
  		  var price_max = $('input[name="price_max"]').first().val();
  		  if(!$.isNumeric(price_min)){
  			$('input[name="price_min"]').first().val(0);
  		  }
  		  if(!$.isNumeric(price_max)){
  			$('input[name="price_max"]').first().val(0);
  		  }
  		  
  		  $('form').submit();
  	  });
	  
  	  
  	  setCurrentNav(2);
  	</script>
</body>
</html>
